<template>
  <div v-show="dialogValue" class="add-page f-c">
    <BackPage title="项目添加、编辑" show-back @back="onPageBack" />
    <div class="add-form-box f-g">
      <el-form ref="formRef" :model="ruleForm" :rules="rules" label-position="top" class="user-add-form " inline>
        <el-form-item label="项目名称" style="width: 100%" prop="projectName">
          <el-input clearable v-model="ruleForm.projectName" />
        </el-form-item>
        <el-form-item label="项目性质" style="width: 100%" prop="projectNature">
          <el-select clearable v-model="ruleForm.projectNature">
            <el-option v-for="item in options1" :key="item.value" :value="item.value" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="建设起止年限" style="width: 100%" prop="startTime">
          <el-row>
            <el-col :span="11">
              <el-form-item prop="startTime" style="width: 100%">
                <el-date-picker
                  style="width: 100%"
                  v-model="ruleForm.startTime"
                  type="year"
                  value-format="yyyy"
                  placeholder="选择年"
                />
              </el-form-item>
            </el-col>
            <el-col :span="2" style="text-align: center">
              <span>至</span>
            </el-col>
            <el-col :span="11">
              <el-form-item prop="buildingTime" style="width: 100%">
                <el-date-picker
                  style="width: 100%"
                  v-model="ruleForm.buildingTime"
                  type="year"
                  value-format="yyyy"
                  placeholder="选择年"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="建设内容与规模" style="width: 100%" prop="constructContent">
          <el-input :rows="5" clearable v-model="ruleForm.constructContent" type="textarea" style="width: 100%" />
        </el-form-item>
        <el-form-item label="总投资" style="margin-right: 64px" prop="totalAmount">
          <el-input clearable v-model="ruleForm.totalAmount" type="number">
            <span slot="suffix">￥</span>
          </el-input>
        </el-form-item>
        <el-form-item label="计划投资" prop="planAmount">
          <el-input clearable v-model="ruleForm.planAmount" type="planAmount">
            <span slot="suffix">￥</span>
          </el-input>
        </el-form-item>
        <el-form-item label="计划形象进度" style="width: 100%" prop="planningBasis">
          <el-input clearable v-model="ruleForm.planningBasis" />
        </el-form-item>
        <el-form-item label="实施单位" style="width: 100%" prop="implementUnit">
          <el-input clearable v-model="ruleForm.implementUnit" />
        </el-form-item>
        <el-form-item label="责任单位" style="width: 100%" prop="dutyUnit">
          <el-input clearable v-model="ruleForm.dutyUnit" />
        </el-form-item>
        <el-form-item label="行业管理单位" style="width: 100%" prop="administrationUnit">
          <el-input clearable v-model="ruleForm.administrationUnit" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSave">保存</el-button>
          <el-button @click="onPageBack">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { http_project1 } from '@/api'
import {project_nature} from "@/dict";

export default {
  name: 'User1Add',
  data() {
    return {
      dialogValue: false,
      options1: project_nature,
      ruleForm: {
        id: undefined,
        'projectName': '',
        'projectCode': '',
        'areaId': 1,
        'projectCategory': '',
        'projectNature': '',
        'projetAttribute': '',
        'projectAddress': '',
        'constructContent': '',
        'planningBasis': '',
        'startTime': '',
        'buildingTime': '',
        'totalAmount': '',
        'planAmount': '',
        'description': '',
        'implementUnit': '',
        'dutyUnit': '',
        'administrationUnit': ''
      },
      rules: {
        projectName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        projectNature: [{ required: true, message: '不能为空', trigger: 'blur' }],
        startTime: [{ required: true, message: '不能为空', trigger: 'blur' }],
        buildingTime: [{ required: true, message: '不能为空', trigger: 'blur' }],
        constructContent: [{ required: true, message: '不能为空', trigger: 'blur' }],
        totalAmount: [{ required: true, message: '不能为空', trigger: 'blur' }],
      },
      options2: []
    }
  },
  methods: {
    async open(item) {
      if (item) {
        for (const key in this.ruleForm) {
          this.ruleForm[key] = item[key]
        }
      } else {
        this.ruleForm = {
          id: undefined,
          'projectName': '',
          'projectCode': '',
          'areaId': 1,
          'projectCategory': '',
          'projectNature': '',
          'projetAttribute': '',
          'projectAddress': '',
          'constructContent': '',
          'planningBasis': '',
          'startTime': '',
          'buildingTime': '',
          'totalAmount': '',
          'planAmount': '',
          'description': '',
          'implementUnit': '',
          'dutyUnit': '',
          'administrationUnit': ''
        }
      }
      this.dialogValue = true
    },
    onPageBack() {
      this.$emit('get-page')
      this.dialogValue = false
    },
    onSave() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          const formData = {
            ...this.ruleForm
          }
          http_project1[this.ruleForm.id ? 'update' : 'create']({
            ...formData
          }).then(res => {
            this.$message.success(res.msg)
            this.onPageBack()
          })
        }
      })
    }

  }
}
</script>

<style scoped lang="scss">
.add-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #F6F6F6;
}
.add-form-box {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(185, 185, 185, .3);
  border-radius: 16px;
  padding: 60px;
  ::v-deep .el-form {
    .el-form-item {
      width: calc((100% - 64px) / 2);
      margin-right: 0;
    }
    .el-select {
      width: 100%;
    }
  }
}
</style>
